//为了避免给每个请求单独设置token,需要全局设置axios拦截器
axios.interceptors.request.use(
    (config) => {
        //这个回调函数，在每次发请求到服务器之前都会调用执行
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
        return config
    },
    (error)=>{
        return Promise.reject(error)
    }
)


//axios全局设置 响应拦截器
axios.interceptors.response.use( 
    (res)=>{  //这个回调函数 在每次请求从服务器端返回到浏览器之前 都会调用执行
        return res;
    },
    (error)=>{ //每次请求发生错误, 都会调用执行

        if( error.response.status == 401 ){
            //alert('登陆过期!需要重新登录');
            localStorage.removeItem('token');
            location.href = './login.html';

        }else if( error.response.status == 404 ){
            alert('访问路径有误!');
        }else if( error.response.status == 500 ){
            alert('服务器内部错误!');
        }

        return Promise.reject(error)
    }
)

//获取浏览器中保存的用户的信息
var userinfo = JSON.parse(localStorage.getItem('userinfo'))
//将其渲染到页面上
document.querySelector('.username').innerHTML = userinfo.name

//获取搜索框和输入框
let inputs = document.querySelector('.input')
var search = document.querySelector('.button')
// console.log(inputs);
//给搜索框绑定点击事件
search.onclick = function () {
    //触发点击事件之后发送请求
    axios.get('/user/search', { params: { searchkey: inputs.value } }).then((res) => {
        // console.log(res.data);
        //进行渲染` 11
        render(res.data.list)
    })
}

//点击删除：利用事件委托
var tr = document.querySelector('.we')
//绑定点击事件
tr.onclick = (e) => {
    //进行判断是不是span标签,且判断是否包含icon-shanchu这个类名
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        //点击后发送删除请求
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            e.target.parentNode.parentNode.remove();
            // render(res.data.list)
        })
    }

}

//拿到数据后进行渲染
function render(data) {
    var str = ``
    str = data.map((item, index) => {
        return `
        <tr>
        <td>${item.email}</td>
        <td>${item.name}</td>
        <td>${item.phone}</td>
        <td>${item.ingroup}</td>
        <td>${item.isadmin ? '是' : '否'}</td>
        <td><button class='${item.status ? '' : 'red'}'>${item.status ? '正常' : '异常'}</button></td>
        <td>
            <span class="iconfont icon-bianji"></span>
            <span class="iconfont icon-shanchu"></span>
        </td>
        </tr>
        `
    }).join('')
    if (str == '') {
        alert('未查询到该用户')
        str = `<span style="margin-left:400px; margin-top=100px;color:red;">未找到该用户</span>`
    }
    document.querySelector('tbody').innerHTML = str
}




//前端发送请求
//axios是从axios.min.js中暴露的，用来发送ajax请求的一个对象
//传参：get传参要有params属性，在params中写传递的参数
axios.get('/user/list', { params: { page: 1, count: 2 } }).then((res) => {
    console.log(res.data);
    //调用render方法，传入后端返回的数据，完成渲染,data是一个对象，只有数组才能使用map方法，所以这儿使用res.data.list
    render(res.data.list)
})
